import React, { memo, useEffect } from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { getRadioFineAction } from '../../store/actionCreators';

import ThemeHeaderNormal from "@/components/theme-header-normal";
import FineCover from '@/components/djradio-fine-cover';
import { FineWrapper } from "./style";

const RadioFine = memo(() => {
  const dispatch = useDispatch();
  const { currentId, fine } = useSelector(state => ({
    currentId: state.getIn(["djradio", "currentId"]),
    fine: state.getIn(["djradio", "fine"])
  }), shallowEqual);

  useEffect(() => {
    /**等currenId不是默认值0，被改变后，再去请求相关的优秀新电台 */
    if (currentId === 0) return;
    dispatch(getRadioFineAction(currentId));
  }, [dispatch, currentId]);

  return (
    <FineWrapper>
      <ThemeHeaderNormal title="优秀新电台" />
      
      <div className="fine-list">
        {
          fine.slice(0, 5).map(item => <FineCover item={item} key={item.id} />)
        }
      </div>
    </FineWrapper>
  )
});

export default RadioFine;